<!DOCTYPE html>
<html>
<head>
    <title>商品详情</title>
    <#include "../common.ftl">
    <style type="text/css">
        .img_wrap{
            overflow: hidden;
            clear: both;
            text-align: center;
        }
        .img_wrap ul{
            padding:10px;
        }
        .img_wrap ul li{
            width:19%;
            height: 300px;
            display:inline-block;
        }
        .img_wrap ul li img{
            width: 100%;
            height: 100%;
        }

        .commodity_info{
            padding: 10px;
            margin-top: 10px;
            border-top: 2px solid #CCCCCC;
            margin-bottom: 100px;
        }
        .price{
            margin-right: 100px;
            font-size: 25px;
            font-weight: bolder;
            color: rgb(255, 0, 76);
        }
        .old_price{
            font-size: 20px;
            font-weight: bold;
            color: orange;
            text-decoration: line-through;
        }
        .commodity_title{
            font-size: 25px;
            font-weight: bolder;
            margin: 10px;
        }
        .click,.repertory{
            padding: 5px;
        }
        .description{
            margin-top: 5px;
            font-size: 25px;
            font-weight: 900;
        }
        .desc_content{
            padding: 5px;
            font-size: 15px;
        }

        .btn_wrap{
            width: 100%;
            height: 50px;
            position: fixed;
            bottom: 0px;
            left: 0px;
        }
        .btn_wrap button{
            margin-top: 8px;
        }
        .updateBtn{
            margin-left: 420px;
        }
        /*    用户信息*/
        .userInfo img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body class="childrenBody">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
    <legend>商品详情</legend>
</fieldset>
<#-- freemarker 遍历获取图片集合-->
<div class="img_wrap">
    <ul>
        <li class="img_item" >
            <#list commodityImgList as commodityImg >
                <img src="${ctx}/upload/imgs/${commodityImg.imgSrc}" />
            </#list>
        </li>
    </ul>
</div>
<#-- 商品信息-->

<!-- 商品信息 -->
<div class="commodity_info">
    <div class="commodity_price">
        <span class="price">￥ ${commodity.price}</span>
    </div>
    <p class="old_price">￥ ${commodity.oldPrice}</p>
    <h2 class="commodity_title">${commodity.title}</h2>
    <div class="commodity_count">
        <span class="layui-badge layui-bg-pink">${commodity.collectCount} 人想要</span>
        <span class="click layui-badge layui-bg-blue">${commodity.clickCount}人浏览</span>
        <span class="repertory layui-badge layui-bg-orange">剩余 ${commodity.repertory}</span>
    </div>
    <div class="userInfo_wrap">
        <div class="userInfo">
<#--            <img src="${commodity.user.avatarUrl}" />-->
            <span>老板：${commodity.user.trueName}</span>
        </div>
        <div>店铺名：${commodity.user.userName}</div>
    </div>
    <h2 class="description">商品描述</h2>
    <hr>
    <span class="desc_content" style="font-size: larger">${commodity.description}</span>
    <hr>
</div>



<div class="btn_wrap">
    <!-- 该商品 id -->
    <input type="hidden" id="commodityId" value="${commodity.id}" />
    <!-- 该商品的标题 -->
    <input type="hidden" id="title" value="${commodity.title}" />
    <!-- 商品发布者的 id -->
    <input type="hidden" id="useId" value="${commodity.user.id}" />
    <#if commodity.state == 3>
        <button type="button" class="layui-btn layui-btn-disabled updateBtn" >
            已下架
        </button>
    </#if>
    <#if commodity.state == 4>
        <button type="button" class="layui-btn layui-btn-disabled updateBtn" >
            已删除
        </button>
    </#if>
    <#if commodity.state == 1>
        <button type="button" id="delCommodity" class="layui-btn layui-btn-warm updateBtn" >
            下架
        </button>
    </#if>
    <#if commodity.state == 2>
        已售罄
    </button>
    </#if>
    <button type="button" id="closeBtn" class="layui-btn layui-btn-primary">
        关闭
    </button>
</div>


<script>
    layui.use(['upload', 'element', 'layer','form'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,form = layui.form
            ,element = layui.element
            ,layer = layui.layer;
        // 下架商品
        $("#delCommodity").on('click',function(){
            let commodityId = $("#commodityId").val();
            // let title = $("#title").val();
            let userId = $("#useId").val();
            layer.confirm("确定要下架该商品吗？",function(data){
                $.ajax({
                    type: 'post',
                    url:ctx+'/commodity/delCommodity',
                    data:{"commodityId":commodityId,"userId":userId},
                    success:function(result){
                        if(result.code==200){
                            layer.msg(
                                result.msg,
                                {
                                    icon:1,
                                    time:1000
                                },
                                function(){
                                    // 先得到当前 iframe 层的索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    // 关闭当前 iframe 层
                                    parent.layer.close(index);
                                }
                            );
                        } else{
                            layer.msg(
                                result.msg,
                                {
                                    icon:2,
                                    time:1000
                                }
                            );
                        }
                    },
                    error: function(data){
                        layer.msg("网络错误！");
                    }
                });
            });
            return false;
        });
        // 关闭当前窗口
        $("#closeBtn").on("click",function(){
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });

    });
</script>




</body>


</html>